<template>
<!--  <div id="building">-->
    <div class="article">
      <el-row>
        <el-col class = "title-block" :span="24">
          <div class="title-text">
            {{ paper.title }}
          </div>
          <div class="sub-title">
            <span v-for="(author, index) in paper.authors" :key="index">
              <span class="_link" @click="gotoAuthor(author.id)">
                {{author.name}}
              </span>
              <span v-if="paper.authors.length>index+1">
                ,
              </span>
            </span>
          </div>
<!--          <div class="sub-title">-->
<!--            {{venues.display_name}}-->
<!--          </div>-->
          <div class="sub-title">
            <span class="date" >{{paper.year}}</span>
          </div>
          <div class="title-button">
            <el-tooltip class="item" effect="light" content="链接" placement="bottom">
              <el-button icon="el-icon-link" circle @click="goLink()"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="收藏" placement="bottom">
              <el-button v-if="is_collected===false" icon="el-icon-star-off" circle @click="collect_article()"></el-button>
              <el-button v-else icon="el-icon-star-on" circle @click="cancel_collect()"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="引用" placement="bottom">
              <el-button icon="el-icon-position" circle @click="cite()"></el-button>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="abstract-div">
            <div class="abstract-title">摘要:</div>
            <div class="abstract-content" v-if="paper.abstract.length<500 || is_span">
              {{paper.abstract}}
              <span v-if="is_span" class="_link" @click="is_span=!is_span">还原</span>
            </div>
            <div class="abstract-content" v-else>
              {{paper.abstract.substring(0,500)}}...
              <span v-if="!is_span" class="_link" @click="is_span=!is_span">更多</span>
            </div>
            <div class="clear"></div>
            <div class="abstract-title" v-show="paper.keywords[0]!=='null'">
              关键词:
            </div>
            <div class="abstract-content" v-show="paper.keywords[0]!=='null'">
              <span v-for="(keyword,index) in paper.keywords">
                <span class="_link" @click="searchKeyword(keyword)">
                  {{keyword}}
                </span>
                <span v-if="paper.keywords.length>index+1">
                  ;
                </span>
              </span>
            </div>
            <div class="clear"></div>
            <div class="abstract-title" v-show="paper.doi">DOI:</div>
            <div class="abstract-content" v-show="paper.doi">
              {{ paper.doi }}
            </div>
            <div class="clear"></div>
            <div class="abstract-title">出版机构:
            </div>
            <div class="abstract-content">
              <span v-if="venues.display_name">{{venues.display_name}}</span>
              <span v-else>
                暂无出版机构信息
              </span>
            </div>
            <div class="clear"></div>
            <div class="abstract-title" v-show="paper.volume">卷:</div>
            <div class="abstract-content" v-show="paper.volume">
              {{ paper.volume }}
            </div>
            <div class="clear"></div>
            <div class="abstract-title" v-show="paper.isbn">ISBN:</div>
            <div class="abstract-content" v-show="paper.isbn">
              {{ paper.isbn }}
            </div>
            <div class="clear"></div>
            <div class="abstract-title" v-show="paper.issn">ISSN:</div>
            <div class="abstract-content" v-show="paper.issn">
              {{ paper.issn }}
            </div>
            <div class="clear"></div>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="recommend">
          <div class="recommend-div">
            <div class="recommend-title">推荐文献</div>
            <hr>
            <div class="recommend-article" v-for="(article,index) in recommend_articles">
              <div @click="gotoArticle(article.paper_id)">
                <el-row>
                  <el-col :span="2" style="text-align: center;font-size: 15px">[{{index+1}}]</el-col>
                  <el-col :span="22">
                    <div class="recommend-article-title">
                      <span>{{article.title}}</span>
                    </div>
                    <div class="recommend-article-author">
                      <span v-for="(author,index2) in article.author_names" :key="index2">
                        <span v-if="index2<5">{{ author }}</span>
                        <span v-if="index2<5 && article.author_names.length > index2 + 1">,&nbsp;</span>
                      </span>
                      <span v-if="article.author_names.length>5">.etc</span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="cite-div">
            <el-row>
              <el-col :span="12" class="language-span">
                {{paper.lang}}
                <div class="language-text">语言</div>
              </el-col>
              <el-col :span="12" class="language-span">
                <span v-if="paper.n_citation">{{paper.n_citation}}</span>
                <span v-else>0</span>
                <div class="language-text">被引量</div>
              </el-col>
            </el-row>
          </div>
          <div class="range-div">
            <div class="range-title">领域</div>
            <hr>
            <div class="field-content" v-for="(field, index) in fields" :key="index" v-show="field">
              <span class="field_name _link" v-show="field.length<25" @click="searchKeyword(field)"> - {{ field }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
<!--  </div>-->
</template>

<script>
import user from "@/store/user";
export default {
  name: "Article",
  data(){
    return{
      user_id: "",
      paper_id: "",
      is_collected: false,
      is_span: false,
      paper:{
        paper_id:"",
        title:"",
        author_id:[],
        venue_id:"",
        keywords:[""],
        year:0,
        n_citation: 0,
        url: [""],
        lang: "",
        page_start:0,
        page_end:0,
        doctype:"",
        publisher: "",
        volume: "",
        issue:"",
        issn:"",
        isbn:"",
        doi: "",
        abstract: "",
        authors:[
          {
            id:"",
            name:"",
          },
        ]
      },
      venues: {
          id:"",
          display_name:"",
          normalized_name: ""
      },
      recommend_articles:[
        {
          paper_id:"",
          title: "",
          author_names:[],
        },
      ],
      fields:[],
    }
  },
  methods:{
    cancel_collect(){
      const that = this
      const formData ={
        user_id: that.user_id,
        paper_id: that.paper_id
      }
      this.$axios({
        method: 'POST',
        url: '/paper/cancelSaveArticle/',
        data: JSON.stringify(formData)
      }).then(res =>{
        if(res.data.msg ==='取消收藏成功'){
          this.isCollected()
          this.$message({
            showClose:true,
            message:'取消收藏成功',
            type:'success'
          })
        }
        else{
          this.$message({
            showClose:true,
            message:'请先登录',
            type: 'error'
          })
        }
      })
    },
    collect_article(){
      const that = this
      const formData ={
        user_id: that.user_id,
        paper_id: that.paper_id
      }
      this.$axios({
        method: 'POST',
        url: '/paper/saveArticle/',
        data: JSON.stringify(formData)
      }).then(res =>{
        if(res.data.msg ==='收藏成功'){
          this.isCollected()
          this.$message({
            showClose:true,
            message:'收藏成功',
            type:'success'
          })
        }
        else{
          this.$message({
            showClose:true,
            message:'请先登录',
            type: 'error'
          })
        }
      })
    },
    goLink(){
      if(this.paper.url===null){
        this.$message.warning('暂无论文链接')
      }
      else{
        window.open(this.paper.url[0],'_blank')
      }
    },
    cite(){
      let i = 0
      let input = document.createElement("input")
      input.value = '[1]'
      for(i=0;i<this.paper.authors.length && i < 3;i++){
        input.value = input.value + this.paper.authors[i].name
        if(i === this.paper.authors.length || i === 2){
          input.value = input.value + '.'
        }
        else{
          input.value = input.value + ','
        }
      }
      input.value = input.value + this.paper.title + '[J]'
      if(this.paper.publisher!==null && this.paper.publisher){
        input.value = input.value + this.paper.publisher
      }
      if(this.paper.year!==null && this.paper.year){
        input.value = input.value + this.paper.year + '.'
      }
      if(this.paper.volume!==null && this.paper.volume && this.paper.issue!==null && this.paper.issue && this.paper.page_start!==null && this.paper.page_end!==null){
        input.value = input.value + this.paper.volume
        input.value = input.value + '(' + this.paper.issue + '):'
      }
      document.body.appendChild(input)
      input.select()
      document.execCommand("Copy")
      document.body.removeChild(input)
      this.$message({
        showClose:true,
        message:'引用格式已复制',
        type:'success'
      })
    },
    getArticleInfo(){
      const that = this
      const formData ={
        paper_id: this.paper_id
      }
      this.$axios({
        method: 'POST',
        url: '/paper/getArticleInfo/',
        data: JSON.stringify(formData)
      }).then(res =>{
        that.paper = res.data.paper
        that.fields = that.paper.keywords
        this.getVenueInfo()
        this.getRelatedArticles()
        // this.getAuthorFields()
        this.isCollected()
      })
    },
    getVenueInfo(){
      const that = this
      const formData ={
        venue_id: that.paper.venue_id
      }
      this.$axios({
        method: 'POST',
        url: '/paper/getVenueInfo/',
        data: JSON.stringify(formData)
      }).then(res =>{
        that.venues = res.data.data
      })
    },
    getRelatedArticles(){
      const that = this
      const formData ={
        title : that.paper.title
      }
      this.$axios({
        method: 'POST',
        url: '/paper/getRelatedArticles/',
        data: JSON.stringify(formData)
      }).then(res =>{
        console.log(res.data)
        that.recommend_articles = res.data.data
      })
    },
    // getAuthorFields(){
    //   const that = this
    //   const formData ={
    //     author_id: that.paper.author_id
    //   }
    //   this.$axios({
    //     method: 'POST',
    //     url: '/paper/getAuthorFields',
    //     data: JSON.stringify(formData)
    //   }).then(res =>{
    //     console.log(res.data)
    //   })
    // },
    gotoAuthor(author_id){
      const that = this
      // alert(author_id)
      const formData ={
        author_id: author_id
      }
      this.$axios({
        method: 'POST',
        url:'/paper/judgeAuthorExist/',
        data: JSON.stringify(formData)
      }).then(res =>{
        if(res.data.is_exist){
          let routeUrl = this.$router.resolve({
            path: '/scholar',
            query: { v: author_id }
          });
          window.open(routeUrl .href, "_self");
        }
        else{
          this.$message.error("暂无该作者信息！")
        }
      })
    },
    gotoArticle(article_id){
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: { v: article_id }
      });
      window.open(routeUrl .href, "_self");
      this.paper_id = this.$route.query.v
      this.getArticleInfo();
      document.documentElement.scrollTop = 0;
    },
    searchKeyword(keyword){
      let routeUrl = this.$router.resolve({
        path: '/searchRes',
        query: { main: keyword }
      });
      window.open(routeUrl .href, "_self");
    },
    isCollected(){
      const that = this
      const formData ={
        user_id : this.user_id,
        paper_id : this.paper.paper_id
      }
      this.$axios({
        method: 'POST',
        url: '/paper/isCollected/',
        data: JSON.stringify(formData)
      }).then(res =>{
        that.is_collected = res.data.is_collect
      })
    },
  },
  created() {
    document.documentElement.scrollTop = 0;
    this.user_id = this.$store.state.user.userId
    // alert(this.user_id)
    this.paper_id = this.$route.query.v
    this.getArticleInfo();
  }
}
</script>

<style scoped>
.title-block {
  margin-left: 0px;
  min-height: 0px;
}
.article .abstract-div {
  background-color: white;
  margin-left: 50px;
  margin-right: 50px;
  /*min-height: 200px;*/
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
.recommend-div{
  padding: 20px;
  background-color: white;
  margin: 20px 0px 30px 50px;
  min-height: 700px;
  max-height: 700px;
  overflow-y: scroll;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}

.cite-div{
  padding: 20px;
  background-color: white;
  margin: 20px 50px 20px 20px;
  min-height: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
.range-div{
  padding: 20px;
  background-color: white;
  margin: 20px 50px 20px 20px;
  min-height: 570px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .04);
}
.language-span{
  text-align: center;
  font-size: 26px;
}
.language-text{
  margin-top: 10px;
  font-size: 14px;
  color: #909eb4;
}
.article .title-text {
  font-family: Tahoma,fantasy;
  text-align: center;
  padding-top: 50px;
  padding-left: 20px;
  font-weight: bold;
  font-size: 28px;
  line-height: 40px;
  color: #353535;
}
.article .sub-title {
  text-align: center;
  padding-left: 0px;
  margin-top: 10px;
  font-size: 15px;
  color: #909eb4;
}
.article .title-button {
  text-align: center;
  padding-left: 0px;
  margin-top: 15px;
  margin-bottom: 20px;
}
.article .abstract-title {
  text-align: left;
  font-weight: bold;
  margin-top: 5px;
  padding: 0 16px;
  font-size: 15px;
  line-height: 24px;
  color: #353535;
  float: left;
}
.article .abstract-content {
  text-align: left;
  margin-top: 5px;
  padding: 0px 16px 6px 16px;
  font-size: 15px;
  line-height: 24px;
}
.recommend-title{
  text-align: center;
  font-weight: bold;
  margin-top: 5px;
  padding: 0 16px;
  font-size: 20px;
}
.recommend-article-title{
  font-size: 15px;
  max-width: 700px;
}
.recommend-article-title:hover{
  color: #1f71df;
}
@keyframes heart-burst {
  from {background-position:left;}
  to { background-position:right;}
}
.recommend-article-author{
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #909eb4;
  max-width: 400px;
}
.article ._link {
  color: #00b1fd;
}
.article ._link:hover {
  color:  #f78989;
  cursor: pointer;
}
.recommend-article{
  padding-top: 20px;
}
.recommend-article:hover{
  background-color: #f4f9ff;
  cursor: pointer;
  color: #1f71df;
}
.range-title{
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
.field-content {
  padding-top: 20px;
  margin-left: 20px;
  text-align: left;
  font-size: 16px;
  line-height: 30px;

}
.clear{clear:both;}
</style>